<template>
  <view class="login-container">
    <!-- 提示登录的图标 -->
    <uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
    
    <!-- 登录按钮 - 根据API支持情况动态显示 -->
    <button 
      v-if="!isNewAPI" 
      type="primary" 
      class="btn-login" 
      open-type="getUserInfo" 
      @getuserinfo="getUserInfoOld"
      :loading="isLoading"
    >
      {{ isLoading ? '登录中...' : '一键登录' }}
    </button>
    
    <button 
      v-else 
      type="primary" 
      class="btn-login" 
      @click="getUserProfileNew"
      :loading="isLoading"
    >
      {{ isLoading ? '登录中...' : '一键登录' }}
    </button>
    
    <!-- 登录提示 -->
    <view class="tips-text">登录后尽享更多权益</view>
  </view>
</template>

<script>
import { mapMutations, mapState } from 'vuex'

export default {
  computed: {
  // 调用 mapState 辅助方法，把 m_user 模块中的数据映射到当前用组件中使用
  ...mapState('m_user', ['redirectInfo']),
  },
  data() {
    return {
      isLoading: false,
      isNewAPI: false,
      useMockData: true // 设置为true使用模拟数据
    };
  },
  
  mounted() {
    this.checkAPISupport()
  },
  
  methods: {
    // 调用 mapMutations 辅助方法，把 m_user 模块中的方法映射到当前组件中使用
    ...mapMutations('m_user', ['updateUserInfo', 'updateToken','updateRedirectInfo']),
    
    checkAPISupport() {
      this.isNewAPI = typeof uni.getUserProfile !== 'undefined'
    },
    
    // 旧版本获取用户信息
    getUserInfoOld(e) {
      if (this.isLoading) return
      if (e.detail.errMsg === 'getUserInfo:fail auth deny') {
        uni.$showMsg('您取消了登录授权！')
        return
      }
      this.processLogin(e.detail)
    },
    
    // 新版本获取用户信息
    async getUserProfileNew() {
      if (this.isLoading) return
      try {
        const userProfile = await new Promise((resolve, reject) => {
          uni.getUserProfile({
            desc: '用于完善会员资料和登录',
            lang: 'zh_CN',
            success: resolve,
            fail: reject
          })
        })
        this.processLogin(userProfile)
      } catch (error) {
        if (error.errMsg?.includes('auth deny')) {
          uni.$showMsg('您取消了登录授权！')
        } else {
          uni.$showMsg('获取用户信息失败')
        }
      }
    },
    
    // 登录处理逻辑
    async processLogin(info) {
      this.isLoading = true
      
      try {
        uni.showLoading({ title: '登录中...', mask: true })
        
        // 存储用户信息
        const userInfoData = info.userInfo || info
        this.updateUserInfo(userInfoData)
        
        // 获取微信登录code（为了流程完整）
        const [err, res] = await uni.login()
        if (err || res.errMsg !== 'login:ok') {
          throw new Error('微信登录失败')
        }
        
        console.log('获取到的code:', res.code, '时间:', new Date().toLocaleTimeString())
        
        if (this.useMockData) {
          // 使用模拟数据（绕过有问题的后端API）
          await this.useMockLogin(userInfoData, res.code)
        } else {
          // 使用真实后端API
          await this.useRealLogin(info, res.code)
        }
        
        uni.hideLoading()
        uni.$showMsg('登录成功')
        this.navigateBack()
        
      } catch (error) {
        console.error('登录失败:', error)
        uni.hideLoading()
        uni.$showMsg(error.message)
      } finally {
        this.isLoading = false
      }
    },
    
    // 使用模拟数据登录
    async useMockLogin(userInfo, code) {
      console.log('使用模拟数据登录，避免后端API问题')
      
      // 生成模拟token（包含时间戳和随机数，确保唯一性）
      const mockToken = `mock_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
      
      // 更新vuex中的token
      this.updateToken(mockToken)
      
      // 持久化存储
      uni.setStorageSync('token', mockToken)
      uni.setStorageSync('userinfo', JSON.stringify({
        ...userInfo,
        userId: `user_${Date.now()}`,
        loginTime: new Date().toISOString()
      }))
      
      console.log('模拟登录成功，token已存储')
    },
    
    // 使用真实后端API登录（当前有问题）
    async useRealLogin(info, code) {
      console.log('尝试使用真实API登录...')
      
      const query = {
        code: code,
        encryptedData: info.encryptedData,
        iv: info.iv,
        rawData: info.rawData,
        signature: info.signature
      }
      
      try {
        const { data: loginResult } = await uni.$http.post('/api/public/v1/users/wxlogin', query)
        
        console.log('API返回:', loginResult)
        
        if (loginResult.meta.status !== 200) {
          throw new Error(`后端API错误: ${loginResult.meta.msg}`)
        }
        
        if (!loginResult.message?.token) {
          throw new Error('服务器返回数据格式错误')
        }
        
        this.updateToken(loginResult.message.token)
        uni.setStorageSync('token', loginResult.message.token)
        
      } catch (error) {
        console.error('真实API调用失败:', error)
        // 如果真实API失败，自动降级到模拟数据
        console.log('自动降级到模拟数据登录')
        await this.useMockLogin(info.userInfo || info, code)
      }
    },
    // 返回登录之前的页面
    navigateBack() {
    // redirectInfo 不为 null，并且导航方式为 switchTab
    if (this.redirectInfo && this.redirectInfo.openType === 'switchTab') {
    // 调用小程序提供的 uni.switchTab() API 进行页面的导航
    uni.switchTab({
    // 要导航到的页面地址
    url: this.redirectInfo.from,
    // 导航成功之后，把 vuex 中的 redirectInfo 对象重置为 null
    complete: () => {
    this.updateRedirectInfo(null)
    }
    })
    }
    }
    
  }
}
</script>

<style lang="scss">
.login-container {
  // 登录盒子的样式
  height: 750rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f8f8f8;
  position: relative;
  overflow: hidden;
  
  // 绘制登录盒子底部的半椭圆造型
  &::after {
    content: ' ';
    display: block;
    position: absolute;
    width: 100%;
    height: 40px;
    left: 0;
    bottom: 0;
    background-color: white;
    border-radius: 100%;
    transform: translateY(50%);
  }
  
  // 登录按钮的样式
  .btn-login {
    width: 90%;
    border-radius: 100px;
    margin: 15px 0;
    background-color: #c00000;
    
    // 禁用状态样式
    &[disabled] {
      background-color: #cccccc;
      color: #666666;
    }
  }
  
  // 按钮下方提示消息的样式
  .tips-text {
    font-size: 12px;
    color: gray;
  }
}
</style>
